// 入户安检统计分析
<template>
    <el-card class="box-card">
        <div class="title">
            <div class="title_box">
                <div class="title_icon"></div>
                <div class="title_value">入户安检统计分析</div>
            </div>
            
            <div class="title_more">
                <img src="../../assets/icons/more.png" alt="" class="more_img">
            </div>
        </div>
        <el-card class="box-card" style="margin-bottom: 10px;"> 
            <div id="mine4" :style="{height:'200px',width:'100%'}" />
        </el-card>
        <!--<el-card class="box-card">
            <div id="mine5" :style="{height:'200px',width:'100%'}" />
        </el-card-->
    </el-card>    
</template>
<script>
  import * as echarts from 'echarts'
export default {
  data() {
    return {
      chart: null,
      num:0,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      this.initChart1()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById('mine4');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '30',
          top:'30',
          icon:'circle',
          align:'left',
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['30%', '50%'],
            data: [
              { value: 1048, name: '已安检户数' },
              { value: 735, name: '未安检户数' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label:{
              normal:{
                show: true, // 图表外的折线是否显示
                // position: 'center',
                // padding: [0, 0, 20, 0],  //设置字angular的边距
                // fontSize: 16,
              },
            },
            labelLine:{
              normal:{
                show:true
              }
            },
            itemStyle: {
              borderRadius: 2, //圆角角度
            }         
          }
        ],
      };

      option && myChart.setOption(option);
    },
    initChart1() {
      var chartDom = document.getElementById('mine5');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
            text: '安检状态',
            top: 'center',
            left: '25%',
            textStyl6: {
            color: '#000',
            fontSize: '12',
            },
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '30',
          top:'30',
          icon:'circle',
          align:'left',
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['30%', '50%'],
            data: [
              { value: 1048, name: '正常' },
              { value: 735, name: '隐患' },
              { value: 580, name: 'Email' },
              { value: 484, name: '到访不遇' },
              { value: 300, name: '拒绝安检' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label:{
              normal:{
                show: false, // 图表外的折线是否显示
                // position: 'center',
                // padding: [0, 0, 20, 0],  //设置字angular的边距
                // fontSize: 16,
              },
            },
            labelLine:{
              normal:{
                show:false
              }
            },
            itemStyle: {
              borderRadius: 5, //圆角角度
            }         
          }
        ],
      };

      option && myChart.setOption(option);
    }
  }
}
</script>
<style scoped lang="scss">
    .title{
      height: 28px;
      color: #303133;
      font-weight: 700;
      line-height: 28px;
      padding-left: 10px;
      display: flex;
      padding-left: 10px;
      justify-content: space-between;
      margin-bottom: 10px;
      align-items: center;
      .title_box{
        width:200px;
        display: flex;
        align-items: center;
        .title_icon{
        width: 4px;
        height: 18px;
        background-color: #d26454;
        border-radius: 4px;
        margin-right: 10px;
      }
      }
    
      .title_more{
        width: 24px;
        height: 28px;
        .more_img{
          display: inline-block;
          width: 24px;
        height: 28px;
        }
      }
    }
</style>